<template>
	<div class="yunui-tool-bar">
		<ul>
			<li v-for="(item,index) in buttonItems" :key="index" @click="execute(index)">
				<i :class="item.icon"></i>
				<span>{{item.label}}</span>
			</li>
		</ul>
		<div style="clear: both;"></div>
	</div>
</template>

<script>
	import DeleteModelCommand from './command/DeleteModelCommand.js';
	import SaveCommand from './command/SaveCommand.js';
	import PreviewCommand from './command/PreviewCommand.js';
	import ExportCommand from './command/ExportCommand.js';
	import ViewComponentTreeCommand from './command/ViewComponentTreeCommand.js';
	export default {
		name: "Toolbar",
		data() {
			return {
				buttonItems: [{
						"label": "保存",
						"icon": "el-icon-folder-remove",
						"command": SaveCommand
					},
					{
						"label": "删除",
						"icon": "el-icon-folder-remove",
						"command": DeleteModelCommand
					},
					{
						"label": "预览",
						"icon": "el-icon-folder-remove",
						"command":PreviewCommand
					},
					{
						"label": "导出",
						"icon": "el-icon-folder-remove",
						"command":ExportCommand
					},
					{
						"label": "组件树",
						"icon": "el-icon-folder-remove",
						"command":ViewComponentTreeCommand
					}
				],
			}
		},
		methods: {
			execute(index) {
				var Command = this.buttonItems[index]["command"];
				var command = new Command();
				if (Command.confirmMessage == undefined) {
					command.execute();
				} else {
					this.$confirm(Command.confirmMessage, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						command.execute();
					}).catch(() => {

					});
				}
			}
		}
	}
</script>

<style>
	
</style>
